<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title></title>
        <script type='text/javascript'>
            
            var CTP_WEB_FULLPATH = '../';
        </script>
        <link href='../../css/jquery/ui.core.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/jquery/ui.theme.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/skins/blue/ctp-common.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/validator.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/panel.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/gridlayout.css' rel='stylesheet' type='text/css'/>
        <link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/combobox.css" rel="stylesheet" type="text/css"/>
        <script type='text/javascript' src='../../js/jquery/jquery.js'>
        </script>
        <script type='text/javascript' src='../../js/jqueryui/jquery-ui.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/jsextend.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator-rules.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/jquery.layout.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/panel/ctp.ui.panel.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/gridlayout/ctp.ui.gridlayout.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/combobox/ctp.ui.combobox.js">
        </script>
        <script type='text/javascript' kind='variant'>
            
            var buttonsLayout, buttonsGroupbox, panel2, showLayout;
            var textfield1;
            var combobox1, combobox2, combobox3, combobox4, combobox_element, textfield1;
        </script>
        <script type='text/javascript' kind='event'>
        </script>
        <script type='text/javascript' kind='ui'>
            
            $(document).ready(function(){
                var button1 = new ctp.ui.button({
                    id: 'button1',
                    text: '禁用按钮',
                    width: '100%',
                    onClick: function(){
                        combobox1.setDisable(true);
                    }
                });
                var button2 = new ctp.ui.button({
                    id: 'button2',
                    text: '启用按钮',
                    width: '100%',
                    onClick: function(){
                        combobox1.setDisable(false);
                    }
                });
                var button3 = new ctp.ui.button({
                    id: 'button3',
                    text: '是否禁用',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: combobox1.isDisable()
                        });
                    }
                });
                var button4 = new ctp.ui.button({
                    id: 'button4',
                    text: '选择值为combobox6的项',
                    width: '100%',
                    onClick: function(){
                        combobox1.setValue("combobox6");
                    }
                });
                var button5 = new ctp.ui.button({
                    id: 'button5',
                    text: '取得选择的值',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: combobox1.getValue()
                        });
                    }
                });
                var button6 = new ctp.ui.button({
                    id: 'button6',
                    text: '取得选择的文本',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: combobox1.getSelectedText()
                        });
                    }
                });
                var button7 = new ctp.ui.button({
                    id: 'button7',
                    text: '设置2个按钮不可用',
                    width: '100%',
                    text: '文本为管理部所在索引',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: combobox1.getIndexByText("管理部")
                        });
                    }
                });
                var button8 = new ctp.ui.button({
                    id: 'button8',
                    text: '选择第二项',
                    width: '100%',
                    onClick: function(){
                        combobox1.setSelectedByIndex(1);
                    }
                });
                var button9 = new ctp.ui.button({
                    id: 'button9',
                    text: '删除所有项',
                    width: '100%',
                    onClick: function(){
                        combobox1.delAllItems();
                    }
                });
                var button10 = new ctp.ui.button({
                    id: 'button10',
                    text: '删除当前选择的项',
                    width: '100%',
                    onClick: function(){
                        combobox1.delSelectedItem();
                    }
                });
                var button11 = new ctp.ui.button({
                    id: 'button11',
                    width: '100%',
                    text: '取得成员数量',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: combobox1.getItemsCount()
                        });
                    }
                });
                var button12 = new ctp.ui.button({
                    id: 'button12',
                    width: '100%',
                    text: '改变前后的值',
                    onClick: function(){
                        combobox1.onChange(function(){
                            ctpMSB.alert({
                                title: '信息提示',
                                message: "你改变了值"
                            });
                        });
                    }
                });
                var button13 = new ctp.ui.button({
                    id: 'button13',
                    width: '100%',
                    text: '触发用户选择函数',
                    onClick: function(){
                        combobox1.onSelect(function(){
                            ctpMSB.alert({
                                title: '信息提示',
                                message: "你进行了选择"
                            });
                        });
                    }
                });
                var button14 = new ctp.ui.button({
                    id: 'button14',
                    width: '100%',
                    text: '设置宽度90%',
                    onClick: function(){
                        combobox1.setWidth("90%");
                    }
                });
                var button15 = new ctp.ui.button({
                    id: 'button15',
                    width: '100%',
                    text: '新增下拉列表项',
                    onClick: function(){
                        combobox1.newItems([{
                            text: '新成员1',
                            value: 'new1'
                        }, {
                            text: '新成员2',
                            value: 'new2'
                        }]);
                    }
                });
                var button16 = new ctp.ui.button({
                    id: 'button16',
                    width: '100%',
                    text: '取得下拉列表框当前设置',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: "初始设置ID："+combobox1.settings.id
                        });
                    }
                });
                var centerDepArr = [];
                centerDepArr.push({
                    value: 'combobox1',
                    text: '软件开发中心'
                });
                centerDepArr.push({
                    value: 'combobox2',
                    text: '管理用户'
                });
                centerDepArr.push({
                    value: 'combobox3',
                    text: '开发人员池'
                });
                centerDepArr.push({
                    value: 'combobox4',
                    text: '测试中心'
                });
                centerDepArr.push({
                    value: 'combobox5',
                    text: '数据中心（上海）'
                });
                centerDepArr.push({
                    value: 'combobox5',
                    text: '管理部'
                });
                centerDepArr.push({
                    value: 'combobox6',
                    text: '产品部'
                });
                centerDepArr.push({
                    value: 'combobox7',
                    text: '海外银行卡组'
                });
                centerDepArr.push({
                    value: 'combobox8',
                    text: '海外存款组'
                });
                centerDepArr.push({
                    value: 'combobox9',
                    text: '海外贷款组'
                });
                centerDepArr.push({
                    value: 'combobox10',
                    text: '海外会计组'
                });
                centerDepArr.push({
                    value: 'combobox11',
                    text: '产品部'
                });
                centerDepArr.push({
                    value: 'combobox12',
                    text: '管理部'
                });
                centerDepArr.push({
                    value: 'combobox13',
                    text: '管理部'
                });
                centerDepArr.push({
                    value: 'combobox14',
                    text: '管理部'
                });
                centerDepArr.push({
                    value: 'combobox15',
                    text: '开发人员池'
                });
                centerDepArr.push({
                    value: 'combobox16',
                    text: '业务支持部'
                });
                centerDepArr.push({
                    value: 'combobox17',
                    text: '管理部'
                });
                centerDepArr.push({
                    value: 'combobox18',
                    text: '产品部'
                });
                centerDepArr.push({
                    value: 'combobox19',
                    text: '管理部'
                });
                centerDepArr.push({
                    value: 'combobox20',
                    text: '应用架构师人员池'
                });
                centerDepArr.push({
                    value: 'combobox21',
                    text: '主机支持部'
                });
                centerDepArr.push({
                    value: 'combobox22',
                    text: '海外批量组1'
                });
                centerDepArr.push({
                    value: 'combobox23',
                    text: '开发人员池'
                });
                centerDepArr.push({
                    value: 'combobox24',
                    text: '平台部'
                });
                centerDepArr.push({
                    value: 'combobox25',
                    text: '研发支持部'
                });
                centerDepArr.push({
                    value: 'combobox26',
                    text: '主机部'
                });
                centerDepArr.push({
                    value: 'combobox27',
                    text: '测试人员池'
                });
                centerDepArr.push({
                    value: 'combobox28',
                    text: '网络部'
                });
                centerDepArr.push({
                    value: 'combobox29',
                    text: '开发人员池'
                });
                centerDepArr.push({
                    value: 'combobox30',
                    text: '平台支持部'
                });
                centerDepArr.push({
                    value: 'combobox31',
                    text: '杭州开发二部外源'
                });
                combobox1 = new ctp.ui.combobox({
                    id: 'comboboxID',
                    width: '155px',
                    items: centerDepArr
                });
                combobox_element = new ctp.ui.combobox({
                    id: 'menuStatus',
                    items: [{
                        text: '激活',
                        value: '0'
                    }, {
                        text: '冻结',
                        value: '1'
                    }],
                    validate: 'rules[required]',
                    width: '155px'
                });//菜单状态
                combobox_element.setSelectedByIndex(1);
                showLayout = new ctp.ui.gridlayout({
                    id: 'showLayout',
                    width: '100%',
                    height: '160px',
                    cols: 1,
                    colSpace: 3,
                    items: [[{
                        element: combobox1
                    }], [{
                        element: combobox_element
                    }]]
                });
                
                buttonsLayout = new ctp.ui.gridlayout({
                    id: 'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [[{
                        element: button1
                    }, {
                        element: button2
                    }, {
                        element: button3
                    }], [{
                        element: button4
                    }, {
                        element: button5
                    }, {
                        element: button6
                    }], [{
                        element: button7
                    }, {
                        element: button8
                    }, {
                        element: button9
                    }],
					[{
                        element: button10
                    }, {
                        element: button11
                    }, {
                        element: button12
                    }],
					[{
                        element: button13
                    }, {
                        element: button14
                    }, {
                        element: button15
                    }],
					[{
                        element: button16
                    }]]
                
                });
                var showGroupbox = new ctp.ui.groupbox({
                    id: 'showGroupbox',
                    items: [showLayout],
                    title: '效果展示区'
                });
                buttonsGroupbox = new ctp.ui.groupbox({
                    id: 'buttonsGroupbox',
                    items: [buttonsLayout],
                    width: '100%',
                    title: '功能测试区'
                });
                panel2 = new ctp.ui.panel({
                    id: 'panel2',
                    title: 'combobox组件',
                    width: '800px',
                    height: '420px',
                    align: 'center',
                    items: [showGroupbox, buttonsGroupbox],
                    renderTo: 'body'
                });
            });
        </script>
    </head>
    <BODY>
        <b>ctp.ui.combobox实例</b>
        <hr/>
        <br/>
    </BODY>
</html>
